<template>
  <van-nav-bar :title="state.type=='approval'?'审批表详情':state.type=='application'?'申请表详情':'协议详情'" left-text="返回" left-arrow @click-left="router.back()" :fixed="true" />
  <div class="adoption-detail">
    <h1>{{state.type=='approval'?'审批表详情':'申请表详情'}}</h1>
    <!-- <div class="detail-item">
      <span>申请人联系方式:</span>
      <span>{{ user.approvalDetail.contact }}</span>
    </div> -->
    <div class="detail-item">
      <span>年龄:</span>
      <span>{{ user.approvalDetail.age }}</span>
    </div>
    <div class="detail-item">
      <span>职业:</span>
      <span>{{ user.approvalDetail.occupation }}</span>
    </div>
    <div class="detail-item">
      <span>性别:</span>
      <span>{{ user.approvalDetail.gender == 'female' ? '女' : '男' }}</span>
    </div>
    <div class="detail-item">
      <span>婚姻状况:</span>
      <span>{{ user.approvalDetail.maritalStatus }}</span>
    </div>
    <div class="detail-item">
      <span>有无养宠经验:</span>
      <span>{{ user.approvalDetail.petExperience ? '有' : '无' }}</span>
    </div>
    <div class="detail-item">
      <span>地区:</span>
      <span>{{ user.approvalDetail.area }}</span>
    </div>
    <div class="detail-item">
      <span>给送养人的话:</span>
      <p>{{ user.approvalDetail.toapplicant }}</p>
    </div>
    <div class="detail-item" v-if="user.approvalDetail.reason">
      <span>拒绝理由:</span>
      <p style="color: red;font-weight: 800;">{{ user.approvalDetail.reason }}</p>
    </div>
  </div>
  <div class="operation"
    v-if="user.approvalDetail.status == 0 && user.approvalDetail.approvaler_id !== user.userInfo.user_id">
    <van-button type="success" @click="aggreApproval">同意领养</van-button>
    <van-button type="danger" @click="state.show=true">拒绝领养</van-button>
  </div>
  <div class="operation"
    v-if="user.approvalDetail.status == 0 && user.approvalDetail.approvaler_id == user.userInfo.user_id">
    <van-button type="danger" @click="cancel">撤回申请</van-button>
  </div>
  <van-dialog v-model:show="state.show" title="拒绝领养" confirm-button-text="确认" @confirm="beforeClose(2)"
    show-cancel-button>
    <van-field v-model="state.reason" required :rules="[{ required: true }]" rows="1" autosize label="理由"
      type="textarea" placeholder="请输入您的理由" />
  </van-dialog>
</template>

<script setup lang="ts">
import { userStore } from '@/store';
import { showConfirmDialog } from 'vant';
import { onMounted, reactive } from 'vue';
import router from '@/router';
import { setApprovalStatus,cancelApproval } from '@/api/index'
const user = userStore()
const state = reactive({
  show: false,
  type:router.currentRoute.value.params.type as string,
})

onMounted(() => {
  user.setApprovalDetail(router.currentRoute.value.params.id)
});

const beforeClose = (status) => {
      let params = {
        id: router.currentRoute.value.params.id,
        status,
      }
      if (status==2) {
        params={...params,reason:state.reason}
      }
      setApprovalStatus(params).then(res => {
        user.setApprovalDetail(router.currentRoute.value.params.id)
        state.reason=''
        state.show=false
      })
};

const aggreApproval = () => {
  showConfirmDialog({
    title: '同意领养',
    message: '确认同意吗？'
  }).then(async () => {
    beforeClose(1)
  }).catch(() => {})

}

const cancel=() => {
  showConfirmDialog({
    title: '撤回申请',
    message: '确认撤回这条申请吗？'
  }).then(async () => {
    cancelApproval(user.approvalDetail.approval_id).then(res => {
        router.back()
      })
  }).catch(() => {})

}
</script>

<style scoped lang="less">
.adoption-detail {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.detail-item {
  margin-bottom: 10px;
}

.detail-item span {
  font-weight: bold;
}

.operation {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 60px;
  gap: 15px;
}
</style>